//引入组件
import React,{ Component } from 'react'

import './index.css'

export default class Item extends Component{

    state = { mouse:false }

    // this.handelMouse(true)
    handelMouse =( flag )=>{
        return () =>{
            this.setState({ mouse:flag })
        }
    }

    // changeCheck
    changeCheck = (id) =>{
        return (event) =>{
            // console.log(id,event.target.checked)
            this.props.updateTodo(id,event.target.checked)
        }
    }

    // 点击删除
    handelDelete = (id)=>{
        return () =>{
            if(window.confirm("你确定要删除此项？")){
                this.props.deteleTodo(id)
            }
        }
    }

    render(){
        const { id,name,isDone} = this.props
        const { mouse } = this.state
        return(
            <li style={{ backgroundColor: mouse ? '#ddd':'#fff' }} onMouseEnter={ this.handelMouse(true) } onMouseLeave={ this.handelMouse(false) }>
                <input type="checkbox" checked={ isDone } onChange={ this.changeCheck(id) }  />&nbsp;&nbsp;
                <label>{ name }</label>
                <span onClick={ this.handelDelete(id) } className="deleteBtn" style={{ display: mouse ? 'block' : 'none'  }}>删除</span>
            </li>
        )
    }
}